<template>
    <!-- 搜索框 -->
    <view class="search-header">
        <view class="search-bar">
            <uni-icons type="search" size="20" class="search-icon"></uni-icons>
            <input v-model="keywords" placeholder-style="color:#ccc" @input="keywordsInput" confirm-type="search" @confirm="searchConfirm"
                class="search-input" :placeholder="placeholder" />
        </view>
    </view>
</template>
<script>
export default {
	props: {
		placeholder: {
			type: String,
			default: '请输入'
		}
	},
	data() {
		return {
			keywords:'',
			timer: null
		};
	},
 
	methods: {
		keywordsInput(res) {
			// 清除之前的定时器
			if (this.timer) {
				clearTimeout(this.timer);
			}
			// 设置1秒后触发emit
			this.timer = setTimeout(() => {
				this.$emit('input', this.keywords);
			}, 600);
		},
		clear() {
			this.keywords = '';
		},
		searchConfirm() {
			this.$emit('confirm', this.keywords);
		}
	}
};
</script>
<style lang="scss" scoped>
.search-header {
    width: 100%;
    background-color: #fff;
    padding: 16rpx 0px;
    height: 72rpx;
}

.search-bar {
    background: #F6F6F6;
    border-radius: 12rpx;
    display: flex;
    align-items: center;
    height: 72rpx;
    margin-left: 20rpx;
    width: calc(100% - 40rpx);
    display: flex;
    align-items: center;
    position: relative;
}

.search-icon {
    font-size: 20rpx;
    color: #999;
    margin-right: 8rpx;
    margin-left: 10rpx;
}

.search-input {
    flex: 1;
    border: none;
    font-size: 28rpx;
    /* background-color: red; */
}
</style>